<template>
  <div class="test-container">
    <h1>客户数据API测试</h1>
    
    <div class="button-row">
      <el-button type="primary" @click="testListAPI">测试列表API</el-button>
      <el-button type="primary" @click="testTestAPI">测试专用API</el-button>
    </div>
    
    <div v-if="loading" class="loading">
      <el-loading :fullscreen="true" text="加载中..."></el-loading>
    </div>
    
    <div v-if="responseData" class="response-data">
      <h2>API响应数据：</h2>
      <pre>{{ JSON.stringify(responseData, null, 2) }}</pre>
    </div>
    
    <div v-if="error" class="error-message">
      <h2>错误信息：</h2>
      <pre>{{ error }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getCustomerList, testCustomerAPI } from '@/api/modules/customer'

const loading = ref(false)
const responseData = ref(null)
const error = ref(null)

// 测试列表API
const testListAPI = async () => {
  loading.value = true
  responseData.value = null
  error.value = null
  
  try {
    const params = {
      page: 1,
      page_size: 10
    }
    
    const response = await getCustomerList(params)
    responseData.value = response
    ElMessage.success('API请求成功')
  } catch (err) {
    console.error('API请求错误:', err)
    error.value = err.toString()
    ElMessage.error('API请求失败')
  } finally {
    loading.value = false
  }
}

// 测试专用API
const testTestAPI = async () => {
  loading.value = true
  responseData.value = null
  error.value = null
  
  try {
    const response = await testCustomerAPI()
    responseData.value = response
    ElMessage.success('测试API请求成功')
  } catch (err) {
    console.error('API请求错误:', err)
    error.value = err.toString()
    ElMessage.error('API请求失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

.button-row {
  margin: 20px 0;
}

.response-data, .error-message {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
}

.response-data {
  background-color: #f0f9eb;
}

.error-message {
  background-color: #fef0f0;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 5px;
  max-height: 600px;
  overflow: auto;
}
</style> 